import React, { Component } from 'react'
import { Row, Col } from 'antd';

import { Faces } from '@/components/Face';
import { Cards } from '@/components/Card';
import { connect } from 'dva';

interface P {
  dispatch?: any;
  id: string;
  data?: {
    card: '1' | '2' | '3' | '4';
    lastFace: '1' | '2' | '3' | '4';
    fireFace: '1' | '2' | '3' | '4';
    fireFaceTime: string;
    ownerFace: '1' | '2' | '3' | '4';
    ownerFaceTime: string;
  }
}

@connect(({ home }) => ({
  data: home.face || {}
}))
class Face extends Component<P> {

  componentDidMount() {
    const { dispatch, id } = this.props;
    dispatch({ type: 'home/queryFace', payload: id })
  }
  
  render() {

    const { data } = this.props;
    const { card, fireFaceTime, fireFace, ownerFace, ownerFaceTime, lastFace } = data;
    
    return (
      <Row style={{ height: '100%', padding: '6% 0' }}>
        <Col span={9} style={{ height: '100%' }}>
          <Row type="flex" justify="center" style={{ height: '100px' }}>
            <Faces type={lastFace} size={100} style={{ marginTop: '0px' }}/>
          </Row>
        </Col>
        <Col span={15} style={{ height: '100%' }}>
          <Row type="flex" justify="space-around" style={{ flexDirection: 'column', height: '100%' }}>
            <Row type="flex" justify="start" gutter={16}>
              <Col>最新监管评定: </Col>
              <Col><Faces type={fireFace} /></Col>
              <Col>{fireFaceTime ? fireFaceTime.slice(0, 10) : ''}</Col>
            </Row>
            <Row type="flex" justify="start" gutter={16}>
              <Col>最新单位自评: </Col>
              <Col><Faces type={ownerFace} /></Col>
              <Col>{ownerFaceTime ? ownerFaceTime.slice(0, 10) : ''}</Col>
            </Row>
            <Row type="flex" justify="start" gutter={16}>
              <Col>红黄牌警告：</Col>
              <Col><Cards type={card} /></Col>
            </Row>
          </Row>
        </Col>
      </Row>
    )
  }
}

export default Face;